<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转相册</title>
    <style>
        html, body{
            height: 100%
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul{
            width: 200px;
            height: 300px;
            position: relative;
            /*transform-style设置成一个3D空间 */
            transform-style: preserve-3d;
            animation: play 10s infinite linear;
        }
        ul li{
            width: 200px;
            height: 300px;
            list-style: none;
            position: absolute;
        }
        ul li img{
            width: 200px;
            height: 300px;
            transition: all 2s;
        }
        ul li:first-child{
            transform: rotateY(40deg) translateZ(300px);
        }
        ul li:nth-child(2){
            transform: rotateY(80deg) translateZ(300px);
        }
        ul li:nth-child(3){
            transform: rotateY(120deg) translateZ(300px);
        }
        ul li:nth-child(4){
            transform: rotateY(160deg) translateZ(300px);
        }
        ul li:nth-child(5){
            transform: rotateY(200deg) translateZ(300px);
        }
        ul li:nth-child(6){
            transform: rotateY(240deg) translateZ(300px);
        }
        ul li:nth-child(7){
            transform: rotateY(280deg) translateZ(300px);
        }
        ul li:nth-child(8){
            transform: rotateY(320deg) translateZ(300px);
        }
        ul li:nth-child(9){
            transform: rotateY(360deg) translateZ(300px);
        }

        @keyframes play{
            from{
                transform: rotateX(-10deg) rotateY(0deg);
            }
            to{
                transform: rotateX(-10deg) rotateY(360deg); 
            }
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
        <li><img src="images/5.jpg" alt=""></li>
        <li><img src="images/6.jpg" alt=""></li>
        <li><img src="images/7.jpg" alt=""></li>
        <li><img src="images/8.jpg" alt=""></li>
        <li><img src="images/9.jpg" alt=""></li>
    </ul>
    <audio src="music/儿童歌曲 - 生日快乐 - 少儿版.mp3" autoplay="autoplay"></audio>
</body>
</html>